<template>
  <div ref="myecharts" class="radar-echart"></div>
</template>

<script>
// 全部导入
// var echarts = require('echarts')
// 按需导入
var echarts = require("echarts/lib/echarts"); // 引入echarts主模块
require("echarts/lib/chart/radar"); // 引入雷达图
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myecharts); // 得到图表实例
    myChart.setOption({
    //   title: {
    //     text: "基础雷达图",
    //   },
    //   legend: {
    //     data: ["预算分配（Allocated Budget）", "实际开销（Actual Spending）"],
    //   },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: "销售", max: 100 },
          { name: "管理", max: 100 },
          { name: "信息技术", max: 100 },
          { name: "客服", max: 100 },
          { name: "研发", max: 100 },
          { name: "市场", max: 100 },
        ],
      },
      series: [
        {
          name: "预算 vs 开销（Budget vs spending）",
          type: "radar",
          data: [
            {
              value: [100, 57, 36, 80, 70, 88],
              name: "预算",
            },
            {
              value: [89, 97, 97, 95, 89, 93],
              name: "实际",
            },
          ],
        },
      ],
    });
  },
};
</script>

<style>
.radar-echart {
  width: 450px;
  height: 400px;
}
</style>